<template>
  <div class="w-full mt-0 p-0">
    <el-card>
      <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold">留言管理</h1>
      </div>

      <!-- 搜索表单 -->
      <el-form :model="searchForm" class="mb-6">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="昵称">
              <el-input v-model="searchForm.nickname" placeholder="请输入昵称" clearable />
            </el-form-item>
          </el-col>
         <el-col :span="4">
  <el-form-item label="状态">
    <el-select v-model="searchForm.status" placeholder="请选择状态">
      <el-option value="">全部</el-option>
      <el-option label="待审核" value="0"></el-option>
      <el-option label="审核通过" value="1"></el-option>
      <el-option label="审核不通过" value="2"></el-option>
    </el-select>
  </el-form-item>
</el-col>
         <el-col :span="6"  class="flex items-center">
  <div class="flex space-x-2">
    <el-button type="primary" @click="searchMessages">搜索</el-button>
    <el-button @click="resetSearch">重置</el-button>
  </div>
</el-col>
        </el-row>
      </el-form>

      <!-- 留言列表 -->
      <el-table v-loading="loading" :data="messages" style="width: 100%">
        <el-table-column prop="nickname" label="昵称" width="150" />
        <el-table-column prop="content" label="留言内容" show-overflow-tooltip />
        <el-table-column prop="color" label="颜色" width="80">
          <template #default="scope">
            <div class="w-6 h-6 rounded" :style="{ backgroundColor: scope.row.color }"></div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 0" type="warning">待审核</el-tag>
            <el-tag v-else-if="scope.row.status === 1" type="success">审核通过</el-tag>
            <el-tag v-else type="danger">审核不通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scope">
            <div v-if="scope.row.status === 0">
              <el-button type="success" size="small" @click="approveMessage(scope.row.id)">
                通过
              </el-button>
              <el-button type="danger" size="small" @click="rejectMessage(scope.row.id)">
                拒绝
              </el-button>
            </div>
            <div v-else>
              <el-button type="danger" size="small" @click="deleteMessageHandler(scope.row.id)">
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="mt-5 flex justify-center">
        <el-pagination
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.size"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getMessagePageList, updateMessageStatus, deleteMessage } from '@/api/admin/message.js'

// 留言数据
const messages = ref([])
const loading = ref(false)

// 分页相关
const pagination = reactive({
  current: 1,
  size: 10,
  total: 0
})

// 搜索表单
const searchForm = reactive({
  nickname: '',
  status: ''
})

// 获取留言列表
const getMessages = (page = 1, pageSize = pagination.size) => {
  loading.value = true
  const params = {
    current: page,
    size: pageSize,
    nickname: searchForm.nickname,
    status: searchForm.status !== '' ? parseInt(searchForm.status) : null
  }

  getMessagePageList(params).then(res => {
    if (res && res.success && res.data) {
      messages.value = res.data.records || res.data || []
      pagination.total = res.data.total || 0
      pagination.current = res.data.current || page
      pagination.size = res.data.size || pageSize
    } else {
      ElMessage.error(res.message || '获取留言列表失败')
    }
  }).catch(err => {
    ElMessage.error('获取留言列表失败')
    console.error(err)
  }).finally(() => {
    loading.value = false
  })
}

// 分页大小变化
const handleSizeChange = (newSize) => {
  pagination.size = newSize
  pagination.current = 1
  getMessages()
}

// 页码变化
const handleCurrentChange = (currentPage) => {
  pagination.current = currentPage
  getMessages(currentPage)
}

// 搜索留言
const searchMessages = () => {
  console.log('搜索条件:', searchForm)
  getMessages()
}

// 重置搜索
const resetSearch = () => {
  searchForm.nickname = ''
  searchForm.status = ''
  getMessages()
}

// 审核通过留言
const approveMessage = (id) => {
  updateMessageStatus({
    id: id,
    status: 1
  }).then(res => {
    if (res && res.success) {
      ElMessage.success('审核通过成功')
      getMessages()
    } else {
      ElMessage.error(res.message || '审核操作失败')
    }
  }).catch(err => {
    ElMessage.error('审核操作失败')
    console.error(err)
  })
}

// 拒绝留言
const rejectMessage = (id) => {
  updateMessageStatus({
    id: id,
    status: 2
  }).then(res => {
    if (res && res.success) {
      ElMessage.success('拒绝成功')
      getMessages()
    } else {
      ElMessage.error(res.message || '拒绝操作失败')
    }
  }).catch(err => {
    ElMessage.error('拒绝操作失败')
    console.error(err)
  })
}

// 删除留言
const deleteMessageHandler = (id) => {
  deleteMessage({
    id: id
  }).then(res => {
    if (res && res.success) {
      ElMessage.success('删除成功')
      getMessages()
    } else {
      ElMessage.error(res.message || '删除失败')
    }
  }).catch(err => {
    ElMessage.error('删除失败')
    console.error(err)
  })
}

// 初始化
onMounted(() => {
  getMessages()
})
</script>

<style scoped>

</style>